<template>
  <div id="app">
    <!-- router-link : a
    tag: 'button' 可以渲染成指定标签
    replace:添加了就让路径不能来回返回
    -->
    <router-link to="/register" tag="button" replace>注册</router-link>
    <router-link to="/home" tag="button" replace>首页</router-link>
    <router-link to="/about" tag="button">列表</router-link>
    <!-- <router-link :to="'/user/' + userId" tag="button">用户</router-link> -->
                     <!-- 参数传递  query-->
    <!-- <router-link :to="{path:'/profile', query:{name:'yzh', sex:'男', age:'23'}}" tag="button">档案</router-link> -->

    <span @click="userClick">用户</span>
    <span @click="profileClick">档案</span>
    
    <!-- Profile,User可以重复销毁创建 注意exclude不能留有空格 -->
    <keep-alive exclude="Profile,User">
      <router-view />
    </keep-alive>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
        userId:'zhangsan'
    }
  },
  methods:{
    userClick() {
      this.$router.push('/user/' + this.userId)
    },
    profileClick() {
      this.$router.push({
        path:'/profile',
        query:{
          name:'华仔',
          sex:'男',
          age:24
        }
      })
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
button{
  margin: 10px;
}
#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
span{
  margin: 0 10px;
  cursor: pointer;
  color: #42b983;
}
</style>
